import { useState } from "react"

function Sun(props) {
  console.log(props)
  // return <div>{props.name}</div>
  { /* 子组件中嵌套的jsx，可以通过props.children获取 */ }
  // return <div>{props.children}</div>
  return (
    <button onClick={() => props.onSendMsg('儿子给父亲传值')}>点击儿子给父亲传值</button>
  )
}
const name = '父亲给儿子传值'
function App() {
  let [msg,setMsg]=useState('')
  const getSunMsg = (msg) => {
    console.log(msg)
    setMsg(msg)
  }
  return (
    <div className="App">
      <div>{msg}</div>
      {/* 子组件给父组件传值的核心：在子组件中调用父组件的函数并传递实参 */}
      <Sun name={name} onSendMsg={getSunMsg}>
        {/* 子组件中嵌套的jsx */}
        <div>这是一个div</div>
      </Sun>
    </div>
  );
}

export default App;
